<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
    <div class="container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="mb-8 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-2xl mb-4 shadow-lg">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
          </svg>
        </div>
        <h1 class="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent mb-2">创建课程</h1>
        <p class="text-gray-600 text-lg">分享你的专业知识，帮助更多人学习</p>
      </div>

      <!-- 创建表单 -->
      <div class="max-w-4xl mx-auto">
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/20 p-8">
          <form @submit.prevent="submitCourse">
            <!-- 基本信息 -->
            <div class="mb-8">
              <h2 class="text-2xl font-bold text-gray-900 mb-6">基本信息</h2>
              
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 课程标题 -->
                <div class="md:col-span-2">
                  <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                    课程标题 <span class="text-red-500">*</span>
                  </label>
                  <input
                    id="title"
                    v-model="form.title"
                    type="text"
                    required
                    placeholder="请输入课程标题"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                </div>

                <!-- 课程类型 -->
                <div>
                  <label for="type" class="block text-sm font-medium text-gray-700 mb-2">
                    课程类型 <span class="text-red-500">*</span>
                  </label>
                  <select
                    id="type"
                    v-model="form.type"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                    <option value="">请选择课程类型</option>
                    <option value="programming">编程技术</option>
                    <option value="design">设计</option>
                    <option value="data-science">数据科学</option>
                    <option value="ai">人工智能</option>
                    <option value="web">Web开发</option>
                    <option value="mobile">移动开发</option>
                    <option value="other">其他</option>
                  </select>
                </div>

                <!-- 难度等级 -->
                <div>
                  <label for="difficulty" class="block text-sm font-medium text-gray-700 mb-2">
                    难度等级 <span class="text-red-500">*</span>
                  </label>
                  <select
                    id="difficulty"
                    v-model="form.difficulty"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                    <option value="">请选择难度等级</option>
                    <option value="beginner">入门</option>
                    <option value="intermediate">中级</option>
                    <option value="advanced">高级</option>
                  </select>
                </div>

                <!-- 课程描述 -->
                <div class="md:col-span-2">
                  <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                    课程描述 <span class="text-red-500">*</span>
                  </label>
                  <textarea
                    id="description"
                    v-model="form.description"
                    required
                    rows="3"
                    placeholder="请简要描述你的课程"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 resize-none"
                  ></textarea>
                </div>
              </div>
            </div>

            <!-- 课程内容 -->
            <div class="mb-8">
              <h2 class="text-2xl font-bold text-gray-900 mb-6">课程详情</h2>
              
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 课程时长 -->
                <div>
                  <label for="duration" class="block text-sm font-medium text-gray-700 mb-2">
                    课程时长（分钟） <span class="text-red-500">*</span>
                  </label>
                  <input
                    id="duration"
                    v-model.number="form.duration"
                    type="number"
                    required
                    min="1"
                    placeholder="请输入课程时长"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                </div>

                <!-- 课程价格 -->
                <div>
                  <label for="price" class="block text-sm font-medium text-gray-700 mb-2">
                    课程价格（元）
                  </label>
                  <input
                    id="price"
                    v-model.number="form.price"
                    type="number"
                    min="0"
                    step="0.01"
                    placeholder="0表示免费"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                </div>
              </div>

              <div class="mt-6">
                <label for="content" class="block text-sm font-medium text-gray-700 mb-2">
                  详细内容 <span class="text-red-500">*</span>
                </label>
                <textarea
                  id="content"
                  v-model="form.content"
                  required
                  rows="8"
                  placeholder="请详细介绍你的课程，包括学习目标、课程大纲、适用人群等"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 resize-none"
                ></textarea>
                <p class="text-sm text-gray-500 mt-2">支持 Markdown 格式</p>
              </div>
            </div>

            <!-- 课程资源 -->
            <div class="mb-8">
              <h2 class="text-2xl font-bold text-gray-900 mb-6">课程资源</h2>
              
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label for="video_url" class="block text-sm font-medium text-gray-700 mb-2">
                    视频链接
                  </label>
                  <input
                    id="video_url"
                    v-model="form.video_url"
                    type="url"
                    placeholder="https://example.com/video"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                </div>

                <div>
                  <label for="materials_url" class="block text-sm font-medium text-gray-700 mb-2">
                    资料下载链接
                  </label>
                  <input
                    id="materials_url"
                    v-model="form.materials_url"
                    type="url"
                    placeholder="https://example.com/materials"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                </div>
              </div>
            </div>

            <!-- 课程图片 -->
            <div class="mb-8">
              <h2 class="text-2xl font-bold text-gray-900 mb-6">课程图片</h2>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  封面图片
                </label>
                <div class="flex items-center space-x-4">
                  <div v-if="form.thumbnail_url" class="w-32 h-32 rounded-lg overflow-hidden border border-gray-300">
                    <img :src="form.thumbnail_url" alt="封面图片" class="w-full h-full object-cover">
                  </div>
                  <div>
                    <input
                      ref="thumbnailInput"
                      type="file"
                      accept="image/*"
                      @change="handleThumbnailUpload"
                      class="hidden"
                    >
                    <button
                      type="button"
                      @click="thumbnailInput?.click()"
                      class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                    >
                      选择图片
                    </button>
                    <p class="text-sm text-gray-500 mt-1">建议尺寸: 800x600px</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 提交按钮 -->
            <div class="flex justify-end space-x-4">
              <button
                type="button"
                @click="router.back()"
                class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
              >
                取消
              </button>
              <button
                type="submit"
                :disabled="submitting"
                class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <span v-if="submitting" class="flex items-center">
                  <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  发布中...
                </span>
                <span v-else>发布课程</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { courseApi } from '@/api/course'

const router = useRouter()

// 表单数据
const form = ref({
  title: '',
  description: '',
  content: '',
  type: '',
  difficulty: '',
  duration: 0,
  price: 0,
  video_url: '',
  materials_url: '',
  thumbnail_url: ''
})

// 其他状态
const submitting = ref(false)
const thumbnailInput = ref<HTMLInputElement>()

// 方法
const handleThumbnailUpload = async (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) {
    target.value = ''
    return
  }

  try {
    // 这里需要实现图片上传API
    // const response = await courseApi.uploadCourseImage(file)
    // if (response.data) {
    //   form.value.thumbnail_url = response.data.url
    // }
    
    // 临时处理：创建本地URL用于预览
    const reader = new FileReader()
    reader.onload = (e) => {
      form.value.thumbnail_url = e.target?.result as string
    }
    reader.readAsDataURL(file)
  } catch (err) {
    console.error('上传封面图片失败:', err)
    alert('上传封面图片失败，请重试')
  } finally {
    target.value = ''
  }
}

const submitCourse = async () => {
  submitting.value = true
  
  try {
    const response = await courseApi.createCourse({
      title: form.value.title,
      description: form.value.description,
      content: form.value.content,
      type: form.value.type as 'video' | 'document' | 'mixed',
      difficulty: form.value.difficulty as 'beginner' | 'medium' | 'advanced',
      duration: form.value.duration,
      // price: form.value.price, // 移除 price 字段，因为 API 不支持
      video_url: form.value.video_url,
      // materials_url: form.value.materials_url, // 移除不支持的字段
      thumbnail_url: form.value.thumbnail_url,
      category: 'programming', // 添加必需的 category 字段
      instructor: '系统管理员' // 添加必需的 instructor 字段
    })

    if (response.id) {
      alert('课程创建成功！')
      router.push(`/courses/${response.id}`)
    }
  } catch (err) {
    console.error('创建课程失败:', err)
    alert('创建课程失败，请重试')
  } finally {
    submitting.value = false
  }
}
</script>
